<template>
  <div id="content">
    <div class="content">
      <div class="content-body">
        <div class="content-body-left">
          <div class="content-body-left-top">
            <ContentBodyHeader title="热门推荐" :leftTab=leftTopTab></ContentBodyHeader>
            <div class="content-body-left-top-main">
              <div class="content-body-left-top-main-item" v-for='(item,index) in hotSheet' :key='index'>
                <img :src="item.coverImgUrl" alt="">
                <div class="content-body-left-top-main-item-text">
                  <a href="">{{item.name}}</a>
                </div>
              </div>
            </div>
          </div>
          <div class="content-body-left-center">
            <ContentBodyHeader title="新碟上架"></ContentBodyHeader>
            <div class="content-body-left-center-main">
              <div class="content-body-left-center-main-item" v-for='(item,index) in newAlbum' :key='index'>
                <img :src="item.blurPicUrl" alt="">
                <div class="content-body-left-center-main-item-sheet"><a href=""
                    class="content-body-left-center-main-item-sheet">{{item.name}}</a></div>
                <div class="content-body-left-center-main-item-singer"><a href=""
                    class="content-body-left-center-main-item-singer">{{item.artist.name}}</a></div>
              </div>
              <div class="content-body-left-center-main-previous" style="position:absolute"><a href="javascript:void(0)" @click="albumPrevious">&lt;</a></div>
              <div class="content-body-left-center-main-next" style="position:absolute"><a href="javascript:void(0)"  @click="albumNext">&gt;</a></div>
            </div>
          </div>
          <div class="content-body-left-bottom">
              <ContentBodyHeader title="榜单"></ContentBodyHeader>
              <ContentTable></ContentTable>
          </div>
        </div>
        <div class="content-body-right">
          <img src="../../assets/login.png" alt="" style="width:100%;height:130px;">
          <div class="content-body-right-top">
            <div class="content-body-right-top-title">
              <h5>入驻歌手</h5>
              <a href="">查看全部&nbsp;&gt;</a>
            </div>
            <div class="content-body-right-top-item" v-for='(item,index) in artists' :key='index'
            @mouseover="isRightTopItem = true,currentRightTopItem = index" @mouseout="isRightTopItem = false"
            :class="{'right-top-item-active': isRightTopItem == true && index == currentRightTopItem}">
              <img :src="item.img1v1Url" alt="">
              <div class="content-body-right-top-item-top">{{item.name}}</div>
              <div class="content-body-right-top-item-bottom">{{item.id}}</div>
            </div>
            <button>申请成为网易音乐人</button>
          </div>
          <div class="content-body-right-bottom">
            <div class="content-body-right-top-title">
              <h5>热门主播</h5>
            </div>
            <div>
            <div class="content-body-right-bottom-item" v-for='(item,index) in dj' :key='index'>
              <img :src="item.avatarUrl" alt="">
              <div class="content-body-right-bottom-item-top"><a href="">{{item.nickName}}</a></div>
              <div class="content-body-right-bottom-item-bottom">{{item.id}}</div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ContentBodyHeader from '@/components/home/Content/ContentBodyHeader'
  import ContentTable from '@/components/home/Content/ContentTable'
  import { getHot, getNewAlbum,getArtists,getDj } from '@/api/home'

  export default {
    name: 'Content',
    components: {
      ContentBodyHeader,
      ContentTable
    },
    created() {
      getHot().then(res => {
        for (var i = 0; i < 8; i++) {
          this.hotSheet.push(res.data.playlists[i])
        }
      })
      getNewAlbum().then(res => {
        //console.log(res.data.albums)
        for (var i = 0; i < res.data.albums.length; i++) {
          if (i <= 4) this.newAlbumOne.push(res.data.albums[i])
          if (i > 4) this.newAlbumTwo.push(res.data.albums[i])
        }
        this.newAlbum = this.newAlbumOne
        //console.log(this.newAlbum[1])
      })
      //getTopList().then(res => {
        //console.log(res.data)
        //for(var i = 0; i < 3; i++){
          //this.toplist.push(res.data.list[i])
       // }
        //console.log(res)
        //console.log(this.toplist)
      //})
      getArtists().then(res => {
        this.artists = res.data.artists
      })
      getDj().then(res =>{
        //console.log(res.data.data.list)
        this.dj = res.data.data.list
      })
    },
    data() {
      return {
        leftTopTab: ['华语', '华语', '流行', '摇滚', '民谣', '电子'],
        hotSheet: [],
        newAlbum: [],
        newAlbumOne: [],
        newAlbumTwo: [],
        toplist:[],
        artists:[],
        isRightTopItem:Boolean,
        currentRightTopItem:Number,
        dj:[],
      }
    },
    methods:{
      //简单分页（上一页）
      albumPrevious(){
        console.log(this.newAlbum == this.newAlbumTwo)
        if(this.newAlbum == this.newAlbumTwo){
          this.newAlbum = this.newAlbumOne
        }else{
          this.newAlbum = this.newAlbumTwo
        }
        
      },
      //简单分页（下一页）
      albumNext(){
        if(this.newAlbum == this.newAlbumOne){
          this.newAlbum = this.newAlbumTwo
        }else{
          this.newAlbum = this.newAlbumOne
        }
      }
    }
  }
</script>

<style>
  a{
    text-decoration: none;
  }
  a:hover{
    text-decoration: underline;
  }
  #content {
    width: 100%;
    height: 1425px;
  }

  .content {
    width: 1260px;
    height: 100%;
    margin: auto;
  }

  .content-body {
    height: 100%;
    width: 1012px;
    margin-left: 121px;
    border: 1px solid #ccc;
    border-top: none;
  }

  .content-body-left {
    height: 100%;
    width: 728px;
    border-right: 1px solid #ccc;
    float: left;
  }

  .content-body-left-top {
    width: 690px;
    height: 525px;
    margin: auto;
    margin-top: 20px;
  }

  .content-body-right {
    height: 100%;
    width: 282px;
    float: left;
  }

  .content-body-left-top-main {
    margin-top: 20px;
    height: 450px;
    width: 100%;
  }

  .content-body-left-top-main-item {
    width: 140px;
    height: 204px;
    float: left;
    margin-left: 26px;
    margin-bottom: 30px;
  }

  .content-body-left-top-main-item img {
    width: 140px;
    height: 140px;
    cursor: pointer;
  }

  .content-body-left-top-main-item-text {
    margin-top: 4px;
  }

  .content-body-left-top-main-item-text a {
    font-size: 14px;
    color: #000;
    text-decoration: none;
  }

  .content-body-left-top-main-item-text a:hover {
    text-decoration: underline !important;
  }

  .content-body-left-center {
    width: 690px;
    height: 245px;
    margin: auto;
    margin-top: 40px;
  }

  .content-body-left-center-main {
    width: 100%;
    height: 186px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    margin-top: 20px;
    position: relative;
  }

  .content-body-left-center-main-item:first-child {
    margin-left: 40px !important;
  }

  .content-body-left-center-main-item {
    width: 118px;
    height: 150px;
    margin-top: 30px;
    margin-left: 10px;
    float: left;
  }


  .content-body-left-center-main-item img {
    height: 100px;
    width: 100px;
    cursor: pointer;
  }

  .content-body-left-center-main-item a:hover {
    text-decoration: underline !important;
  }

  .content-body-left-center-main-item-sheet a {
    text-decoration: none;
    color: black;
    font-size: 12px;
  }

  .content-body-left-center-main-item-sheet {
    height: 20px;
    width: 92%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }

  .content-body-left-center-main-item-singer {
    height: 20px;
    width: 92%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }

  .content-body-left-center-main-item-singer a {
    text-decoration: none;
    color: #666;
    font-size: 12px;
  }

  .content-body-left-center-main-previous{
    width: 20px;
    height: 30px;
    font-size: 20px;
    font-weight:bolder;
    text-align: center;
    line-height: 30px;
    top:70px;
    left: 15px;
  }
  .content-body-left-center-main-previous a{
    color: #666;
  }
  .content-body-left-center-main-previous a:hover{
    color: #333;
  }
  .content-body-left-center-main-next{
    width: 20px;
    height: 30px;
    font-size: 20px;
    font-weight:bolder;
    text-align: center;
    line-height: 30px;
    top:70px;
    right: 15px;
  }
  .content-body-left-center-main-next a{
    color: #666;
  }
  .content-body-left-center-main-next a:hover{
    color: #333;
  }
  .content-body-left-bottom{
    width: 690px;
    margin: auto;
    height: 530px;
    margin-top: 40px;
  }
.content-body-right-top{
  width: 100%;
  height: 500px;
  float: left;
}
.content-body-right-top-title{
  width: 80%;
  margin: auto;
  height: 40px;
  border-bottom: 1px solid #666;
  position: relative;
}
.content-body-right-top-title h5{
  position: absolute;
  top:-5px;
}
.content-body-right-top-title a{
  position:absolute;
  right: 0;
  bottom: 7px;
  color: #999;
  font-size: 12px;
}
.content-body-right-top-item{
  height: 60px;
  margin: auto;
  width: 80%;
  background-color: #fafafa;
  border: 1px solid #e9e9e9;
  margin-top: 15px;
  position: relative;
  cursor: pointer;
}
.right-top-item-active{
  background-color: #f4f4f4 !important;
}
.content-body-right-top-item:first-child{
  margin-top: 20px !important;
}
.content-body-right-top-item img{
  width: 60px;
  height: 100%;
}
.content-body-right-top-item-top{
  position:absolute;
  top: 6px;
  left: 75px;
}
.content-body-right-top-item-bottom{
  position: absolute;
  color: #666;
   top: 34px;
  left: 75px;
  font-size: 12px;
}
.content-body-right-top button{
  background-color: #fafafa;
  margin-left: 10%;
  width: 80%;
  height: 30px;
  margin-top: 15px;
  cursor: pointer;
  border-radius: 4px;
  border:1px solid #999;
  font-size: 12px;
  font-weight: bold;
}
.content-body-right-top button:hover{
  background-color:#ffffff;
}
.content-body-right-bottom{
    width: 100%;
  height: 400px;
  float: left;
}

.content-body-right-bottom-item:first-child{
  margin-top: 20px !important;
}
.content-body-right-bottom-item{
  width: 80%;
  margin: auto;
  height: 40px;
  margin-top: 10px;
  position: relative;
  font-size: 12px;
}
.content-body-right-bottom-item img{
  cursor: pointer;
  width: 40px;
  height: 100%;
}
.content-body-right-bottom-item-top{
  position: absolute;
  top: 5px;
  left: 50px;
}
.content-body-right-bottom-item-top a{
  color: black;
}
.content-body-right-bottom-item-bottom{
  position: absolute;
  top: 21px;
  left: 50px;
  color: #666;
}
</style>